<template>
  <div v-if="isActive" :class="contentClass">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'TabsContent',
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  inject: ['activeTab'],
  computed: {
    isActive() {
      return this.activeTab === this.value;
    },
    contentClass() {
      return 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
    },
  },
};
</script>
